import React from 'react';
import {
  View,
  Text,
  ScrollView,
  TouchableOpacity,
  StyleSheet,
  Linking,
} from 'react-native';
import { SafeAreaView } from 'react-native-safe-area-context';
import { Ionicons } from '@expo/vector-icons';
import { observer } from 'mobx-react-lite';
import { useNavigation } from '@react-navigation/native';
import { StackNavigationProp } from '@react-navigation/stack';
import { RootStackParamList } from '@/route/Route';

type AboutPageNavigationProp = StackNavigationProp<RootStackParamList, 'About'>;

export const AboutPage = observer(() => {
  const navigation = useNavigation<AboutPageNavigationProp>();

  const handleOpenWebsite = () => {
    Linking.openURL('https://autocost.app');
  };

  const handleOpenPrivacy = () => {
    Linking.openURL('https://autocost.app/privacy');
  };

  const handleOpenTerms = () => {
    Linking.openURL('https://autocost.app/terms');
  };

  const aboutSections = [
    {
      title: '应用信息',
      items: [
        {
          id: 'version',
          title: '版本',
          value: '1.0.0',
          type: 'info',
        },
        {
          id: 'build',
          title: '构建号',
          value: '2024.1.1',
          type: 'info',
        },
        {
          id: 'size',
          title: '应用大小',
          value: '15.2 MB',
          type: 'info',
        },
      ],
    },
    {
      title: '开发团队',
      items: [
        {
          id: 'developer',
          title: '开发者',
          value: 'AutoCost Team',
          type: 'info',
        },
        {
          id: 'website',
          title: '官方网站',
          value: 'autocost.app',
          type: 'link',
          onPress: handleOpenWebsite,
        },
        {
          id: 'email',
          title: '联系邮箱',
          value: 'support@autocost.app',
          type: 'link',
          onPress: () => Linking.openURL('mailto:support@autocost.app'),
        },
      ],
    },
    {
      title: '法律信息',
      items: [
        {
          id: 'privacy',
          title: '隐私政策',
          value: '查看隐私政策',
          type: 'link',
          onPress: handleOpenPrivacy,
        },
        {
          id: 'terms',
          title: '用户协议',
          value: '查看用户协议',
          type: 'link',
          onPress: handleOpenTerms,
        },
        {
          id: 'license',
          title: '开源许可',
          value: 'MIT License',
          type: 'info',
        },
      ],
    },
  ];

  return (
    <SafeAreaView style={styles.container}>
      <View style={styles.header}>
        <TouchableOpacity
          style={styles.backButton}
          onPress={() => navigation.goBack()}
        >
          <Ionicons name="arrow-back" size={24} color="#1e293b" />
        </TouchableOpacity>
        <Text style={styles.headerTitle}>关于我们</Text>
        <View style={styles.placeholder} />
      </View>

      <ScrollView
        style={styles.scrollView}
        showsVerticalScrollIndicator={false}
      >
        {/* App Logo and Info */}
        <View style={styles.appInfo}>
          <View style={styles.appLogo}>
            <Ionicons name="car" size={60} color="#0ea5e9" />
          </View>
          <Text style={styles.appName}>AutoCost</Text>
          <Text style={styles.appDescription}>专业的汽车费用管理应用</Text>
          <Text style={styles.appVersion}>版本 1.0.0</Text>
        </View>

        {/* Sections */}
        {aboutSections.map((section, sectionIndex) => (
          <View key={sectionIndex} style={styles.section}>
            <Text style={styles.sectionTitle}>{section.title}</Text>
            <View style={styles.sectionContent}>
              {section.items.map((item, itemIndex) => (
                <TouchableOpacity
                  key={item.id}
                  style={[
                    styles.menuItem,
                    itemIndex === section.items.length - 1 &&
                      styles.lastMenuItem,
                  ]}
                  onPress={item.type === 'link' ? item.onPress : undefined}
                  disabled={item.type === 'info'}
                >
                  <Text style={styles.menuTitle}>{item.title}</Text>
                  <View style={styles.menuItemRight}>
                    <Text
                      style={[
                        styles.menuValue,
                        item.type === 'link' && styles.linkValue,
                      ]}
                    >
                      {item.value}
                    </Text>
                    {item.type === 'link' && (
                      <Ionicons
                        name="chevron-forward"
                        size={16}
                        color="#cbd5e1"
                        style={styles.linkIcon}
                      />
                    )}
                  </View>
                </TouchableOpacity>
              ))}
            </View>
          </View>
        ))}

        {/* Copyright */}
        <View style={styles.copyright}>
          <Text style={styles.copyrightText}>
            © 2024 AutoCost Team. All rights reserved.
          </Text>
          <Text style={styles.copyrightSubtext}>
            Made with ❤️ for car owners
          </Text>
        </View>
      </ScrollView>
    </SafeAreaView>
  );
});

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#f8fafc',
  },
  header: {
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'space-between',
    paddingHorizontal: 20,
    paddingVertical: 15,
    backgroundColor: '#ffffff',
    borderBottomWidth: 1,
    borderBottomColor: '#e2e8f0',
  },
  backButton: {
    padding: 4,
  },
  headerTitle: {
    fontSize: 18,
    fontWeight: '600',
    color: '#1e293b',
  },
  placeholder: {
    width: 32,
  },
  scrollView: {
    flex: 1,
  },
  appInfo: {
    alignItems: 'center',
    paddingVertical: 40,
    backgroundColor: '#ffffff',
    margin: 20,
    borderRadius: 16,
    elevation: 1,
    shadowColor: '#000',
    shadowOffset: { width: 0, height: 1 },
    shadowOpacity: 0.05,
    shadowRadius: 1,
  },
  appLogo: {
    width: 100,
    height: 100,
    borderRadius: 50,
    backgroundColor: '#f0f9ff',
    alignItems: 'center',
    justifyContent: 'center',
    marginBottom: 16,
  },
  appName: {
    fontSize: 24,
    fontWeight: 'bold',
    color: '#1e293b',
    marginBottom: 8,
  },
  appDescription: {
    fontSize: 16,
    color: '#64748b',
    textAlign: 'center',
    marginBottom: 8,
  },
  appVersion: {
    fontSize: 14,
    color: '#94a3b8',
  },
  section: {
    marginTop: 20,
  },
  sectionTitle: {
    fontSize: 14,
    fontWeight: '600',
    color: '#64748b',
    marginBottom: 8,
    paddingHorizontal: 20,
  },
  sectionContent: {
    backgroundColor: '#ffffff',
    marginHorizontal: 20,
    borderRadius: 12,
    overflow: 'hidden',
    elevation: 1,
    shadowColor: '#000',
    shadowOffset: { width: 0, height: 1 },
    shadowOpacity: 0.05,
    shadowRadius: 1,
  },
  menuItem: {
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'space-between',
    paddingHorizontal: 20,
    paddingVertical: 16,
    borderBottomWidth: 1,
    borderBottomColor: '#f1f5f9',
  },
  lastMenuItem: {
    borderBottomWidth: 0,
  },
  menuTitle: {
    fontSize: 16,
    color: '#1e293b',
    fontWeight: '500',
  },
  menuItemRight: {
    flexDirection: 'row',
    alignItems: 'center',
  },
  menuValue: {
    fontSize: 14,
    color: '#64748b',
  },
  linkValue: {
    color: '#0ea5e9',
  },
  linkIcon: {
    marginLeft: 4,
  },
  copyright: {
    alignItems: 'center',
    marginTop: 40,
    marginBottom: 40,
    paddingHorizontal: 20,
  },
  copyrightText: {
    fontSize: 14,
    color: '#64748b',
    textAlign: 'center',
    marginBottom: 4,
  },
  copyrightSubtext: {
    fontSize: 12,
    color: '#94a3b8',
    textAlign: 'center',
  },
});
